<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>

<body>
    <!-- ajax 前后台进行交互 -->
    <!-- 
        expressSever服务器共有四个接口
        get: http://localhost:5000/testAjax
        get:http://localhost:5000/testJSONP
        get:http://localhost:5000/testCORS


    


     -->
    <button class="btn1">发送ajax请求</button>
    <button class="btn2">testpost</button>
    <button class="btn3">test jsonp</button>
    <button class="btn4">简写方式get</button>
    <button class="btn5">post简写方式</button>
    <script>
        //  点击btn1发送ajax请求
        $('.btn1').click(function () {
            // $.ajax()
            // 发送get请求
            $.ajax({
                method: 'get',
                url: 'http://localhost:5000/testAjax',
                success: function (date) {
                    console.log(date);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })

        // 发送post请求
        $('.btn2').click(function () {
            $.ajax({
                method: 'post',
                url: 'http://localhost:5000/testPOST',
                data: {
                    name: '小王子',
                    age: 15
                },
                success: function (data) {
                    console.log(data)
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })
        // jsonp 请求
        $('.btn3').click(function () {
            $.ajax({
                url: 'http://localhost:5000/testJSONP',
                method: 'get',
                dataType: 'jsonp',
                jsonpCallback: 'getData',
                success: function (data) {
                    console.log(data);
                }
            })
        })

        // 简写方式

        $('.btn4').click(function () {

            $.get('http://localhost:5000/testAjax', {}, function (data) { console.log(data) });
        })

        $('.btn5').click(function () {
            $.post('http://localhost:5000/testPOST', { name: 'xx', age: 15 }, function (data) {
                console.log(data);
            })
        })
    </script>
</body>

</html>